<template>
  <div class="network-status">
    <el-alert
      v-if="showError"
      :title="errorTitle"
      :type="errorType || 'error'"
      :closable="false"
      show-icon
    >
      <template #default>
        <p>{{ errorMessage }}</p>
        <div class="error-actions">
          <el-button type="primary" @click="retryConnection" :loading="retrying">
            重试连接
          </el-button>
          <el-button @click="checkBackendStatus">
            检查后端状态
          </el-button>
        </div>
      </template>
    </el-alert>
    
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { homeAPI } from '../services/api.js'
import { ElMessage } from 'element-plus'

export default {
  name: 'NetworkStatus',
  props: {
    error: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['retry', 'clear-error'],
  setup(props, { emit }) {
    const retrying = ref(false)
    
    const showError = computed(() => {
      return props.error && props.error.trim() !== '' && !props.loading
    })
    
    const showSuccess = computed(() => {
      return !props.error && !props.loading && !retrying.value
    })
    
    const errorTitle = computed(() => {
      if (!props.error) return '连接错误'
      if (props.error.includes('网络连接中断')) {
        return '网络连接问题'
      } else if (props.error.includes('无法连接到后端服务器')) {
        return '后端服务未启动'
      } else if (props.error.includes('ERR_INCOMPLETE_CHUNKED_ENCODING')) {
        return '数据传输中断'
      }
      return '连接错误'
    })
    
    const errorType = computed(() => {
      if (!props.error) return 'error'
      if (props.error.includes('网络连接中断') || props.error.includes('ERR_INCOMPLETE_CHUNKED_ENCODING')) {
        return 'warning'
      }
      return 'error'
    })
    
    const errorMessage = computed(() => {
      if (!props.error) return '未知错误'
      if (props.error.includes('网络连接中断')) {
        return '网络连接不稳定，请检查网络连接或稍后重试'
      } else if (props.error.includes('无法连接到后端服务器')) {
        return '后端服务未启动,请启动后端服务'
      } else if (props.error.includes('ERR_INCOMPLETE_CHUNKED_ENCODING')) {
        return '数据传输过程中断，这可能是由于网络不稳定或后端服务响应异常'
      } else if (props.error.includes('后端服务未启动')) {
        return '后端服务未启动,请启动后端服务'
      }
      return props.error
    })
    
    const retryConnection = async () => {
      retrying.value = true
      try {
        emit('retry')
        ElMessage.success('正在重新连接...')
      } catch (error) {
        ElMessage.error('重试失败：' + error.message)
      } finally {
        retrying.value = false
      }
    }
    
    const checkBackendStatus = async () => {
      try {
        await homeAPI.getSystemStatus()
        ElMessage.success('后端服务连接正常')
        // 如果后端检查成功，清除错误状态
        emit('clear-error')
      } catch (error) {
        ElMessage.error('后端服务连接失败：' + error.message)
      }
    }
    
    return {
      retrying,
      showError,
      showSuccess,
      errorTitle,
      errorType,
      errorMessage,
      retryConnection,
      checkBackendStatus
    }
  }
}
</script>

<style scoped>
.network-status {
  margin-bottom: 20px;
}

.error-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.error-actions .el-button {
  flex: 1;
  min-width: 120px;
}

@media (max-width: 480px) {
  .error-actions {
    flex-direction: column;
  }
  
  .error-actions .el-button {
    min-width: auto;
  }
}
</style>
